<template>
    <view class="page">
        <view class="logo">
            <image :src="$imgUrl+'logo01.png'" mode=""></image>
        </view>
        <!-- 填写区 -->
        <view class="input-info">
            <view class="info">
                <input type="tel" maxlength="11" v-model="form.mobile" placeholder="请输入手机号">
                <view class="more"></view>
            </view>
            <view class="info">
                <input type="tel" v-model="form.code" maxlength="6" placeholder="请输入验证码">
                <view class="more">
                    <text class="mo" :disabled="codeDisabled" plain @click="getCode">{{codeText}}</text>
                    <!-- <text class="mo" style="display: none">59秒后重试</text> -->
                </view>
            </view>
            <view class="info">
                <input :password='!isPassword' v-model="form.password" maxlength="26" placeholder="请输入登录密码(最少6位)">
                <view class="more">
                    <text class="iconfont" :class="isPassword ? 'icon-eye-off' : 'icon-eye-on'" @click="isPassword = !isPassword"></text>
                </view>
            </view>
            <view class="info">
                <input :password='!isPassword0' v-model="form.password0" maxlength="26" placeholder="请再次输入密码">
                <view class="more">
                    <text class="iconfont" :class="isPassword0 ? 'icon-eye-off' : 'icon-eye-on'" @click="isPassword0 = !isPassword0"></text>
                </view>
            </view>
        </view>
        <!-- 按钮 -->
        <view class="btn-info">
            <view class="btn" @click="onLogin()">
                <text>确定</text>
            </view>
        </view>

        <quick-message ref="message"></quick-message>
    </view>
</template>

<script>
import { loginToThree } from '@/api/login.js'
export default {
    data() {
        return {
            isLogin: false,
            isLoginWay: false,
            isPassword: false,
            isPassword0: false,
            codeText: '获取验证码',
            menuNum: 60,
            codeDisabled: false, //验证码禁用状态
            codeTimer: null,
            // 表单
            form: {
                mobile: null,
                code: null,
                password: null,
            },
            $imgUrl: this.$imgUrl,
        };
    },
    methods: {
        showToast() {
            this.$refs.message.show({
                msg: this.toastText,
                type: "error",
            });
        },
        checkPhone() {
            return new Promise((resolve, reject) => {
                if (!this.form.mobile) {
                    this.toastText = "请输入手机号";
                    this.showToast();
                    reject();
                } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile)) {
                    this.toastText = "请输入正确的手机号";
                    this.toastError = true;
                    this.showToast();
                    reject();
                }
                resolve()
            })
        },
        checkAll() {
            return new Promise((resolve, reject) => {
                if (!this.form.mobile) {
                    this.toastText = "请输入手机号";
                    this.showToast();
                    reject();
                } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile)) {
                    this.toastText = "请输入正确的手机号";
                    this.showToast();
                    reject();
                } else if (!this.form.code) {
                    this.toastText = "请输入验证码";
                    this.showToast();
                    reject();
                } else if (!this.form.password) {
                    this.toastText = "请输入登录密码";
                    this.showToast();
                    reject();
                } else if (this.form.password.length < 6) {
                    this.toastText = "登录密码最少6位";
                    this.showToast();
                    reject();
                } else if (this.form.password != this.form.password0) {
                    this.toastText = "两次输入密码不一致";
                    this.showToast();
                    reject();
                }
                resolve();
            });
        },
        // 获取验证码
        getCode() {
            var self = this;
            this.checkPhone().then(() => {
                this.codeDis = true;
                this.codeText = self.menuNum + "s";
                this.timer = setInterval(function () {
                    if (self.menuNum == 0) {
                        clearInterval(self.timer);
                        self.codeDis = false;
                        self.codeText = "重新获取";
                        self.menuNum = 60;
                    } else {
                        self.menuNum--;
                        self.codeText = self.menuNum + "s";
                    }
                }, 1000);
                loginToThree({ mobile: this.form.mobile.trim() }).then((res) => {
                    if (res.code == 1) {
                        this.$message('验证码已发送')
                    }
                })
            }).catch(() => { });
        },
        /**
         * 登录点击
         */
        onLogin() {
            this.checkAll().then(() => {
                let json = {
                    mobile: this.form.mobile,
                    code: this.form.code,
                    pass: this.$md5.md5(this.form.password),
                }
                this.$store.dispatch('resetLogin', json).then((res) => {
                    console.log(res, 178)
                    if (res.code == 1) {
                        this.$refs.message.show({
                            msg: "修改成功",
                            type: "success"
                        })
                        setTimeout(() => {
                            uni.navigateBack({
                                url: '/pagesA/login/findCodeindex'
                            })
                        }, 1000)
                    }
                }).catch(() => {
                    this.loading = false;
                });
            }).catch(() => { })
        },
    }
}
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 240rpx;

  image {
    width: 400rpx;
    height: 120rpx;
  }
}

/* 填写 */
.input-info {
  padding: 0 6%;
  height: 480rpx;

  .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100rpx;
    border-bottom: 2rpx solid #f6f6f6;

    input {
      width: 70%;
      height: 100%;
      font-size: 26rpx;
      color: #222222;
    }

    .more {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 30%;
      height: 100%;

      .iconfont {
        font-size: 34rpx;
      }

      .mo {
        font-size: 26rpx;
        padding-left: 20rpx;
        margin-left: 10rpx;
        border-left: 2rpx solid #eeeeee;
      }
    }
  }
}

/* 按钮 */
.btn-info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100rpx;

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88%;
    height: 80rpx;
    background: #2e996f;
    border-radius: 10rpx;
    color: #ffffff;
    font-size: 28rpx;
    // opacity: 0.4;
  }
}

/* 操作 */
.operation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6%;
  height: 80rpx;

  text {
    font-size: 28rpx;
    color: #555555;
  }
}

/* 其他 */
.other-ways {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80rpx;
  margin-top: 100rpx;

  text {
    font-size: 28rpx;
    color: #999999;
  }
}

.other-ways::after {
  content: "";
  width: 36%;
  height: 2rpx;
  background-color: #eeeeee;
}

.other-ways::before {
  content: "";
  width: 36%;
  height: 2rpx;
  background-color: #eeeeee;
}

/* 登录方式 */
.login-way {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200rpx;

  .way {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // width: 50%;
    padding: 0 20rpx;
    // background-color: gold;
    height: 100%;

    image {
      width: 100rpx;
      height: 100rpx;
    }

    text {
      font-size: 28rpx;
      color: #959595;
      margin-top: 20rpx;
    }
  }
}
</style>
